<template>
	<view class="container">
		<uni-nav-bar height="125rpx" :border="false" left-icon="left" @clickLeft="navLeft()">
			<view class="input-view-box">
				<view class="input-view">
					<uni-icons class="input-uni-icon" type="search" size="40rpx" color="#999" />
					<input confirm-type="search" class="nav-bar-input" type="text" v-model="searchQuery" />
					<uni-icons class="input-uni-icon" type="clear" size="40rpx" color="#999" @click="navLeft()" />
				</view>
			</view>
		</uni-nav-bar>
		<view class="orders">
			<view class="order" v-for="(order, index) in orders" :key="index">
				<view class="order-box">
					<image src="/static/lyyImages/u3127.svg" mode="" style="width: 50rpx;height: 50rpx;"></image>
					<view class="order-info">
						<text class="order-title">门票</text>
						<text class="order-name">{{ order.name }}</text>
						<text class="order-date">{{ order.date }}有效 · {{ order.quantity }}</text>
						<text class="order-voucher">凭「{{ order.voucher }}」取票使用</text>
					</view>
					<view class="order-status-price">
						<view class="statusBox" v-if="order.status==='待支付'||order.status==='未使用'">
							<text style="color: blue;" class="order-status">{{ order.status }}</text>
						</view>
						<view class="statusBox" v-else>
							<text class="order-status" style="color: #8f8f8f;">{{ order.status }}</text>|
							<uni-icons type="trash" size="20" style="color: #ccc"></uni-icons>
						</view>
						<text class="order-price">¥<text style="font-size: 50rpx;">{{ order.price }}</text></text>
					</view>
				</view>
				<view class="btnBox">
					<view class="order-actions">
						<button size="mini" v-if="order.status === '待支付'" class="action-button"
							@click="cancel(order)">取消</button>
						<button size="mini" v-if="order.status === '待支付'" class="action-button gradient"
							@click="goToPay(order)">去支付</button>
						<button size="mini" v-if="order.status === '未使用'" class="action-button"
							@click="refundTicket(order)">退款</button>
						<button size="mini" v-if="order.status === '未使用'" class="action-button gradient"
							@click="useTicket(order)">去使用</button>
						<button size="mini" v-if="order.status === '已使用'" class="action-button"
							@click="reviewTicket(order)">去评价</button>
						<button size="mini" v-if="order.status === '已取消'||order.status === '已使用'" class="action-button"
							@click="reserve(order)">再次预订</button>
					</view>
				</view>
			</view>


		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue";
	const searchQuery = ref("北京故宫")

	function navLeft() {
		uni.navigateBack()
	}

	const orders = ref([{
			name: '故宫博物院成人票',
			date: '11月20日',
			quantity: '1份',
			voucher: '电子凭证',
			price: 30,
			status: '已使用'
		},
		{
			name: '故宫博物院学生票',
			date: '11月19日',
			quantity: '1份',
			voucher: '三种使用方式',
			price: 30,
			status: '已取消'
		}
	])


	function switchTab(index) {
		activeTab.value = index;
		console.log(activeTab);
	}

	function reserve(order) {
		console.log('再次预定', order);
	}

	function cancel(order) {
		console.log('取消', order);
	}

	function goToPay(order) {
		console.log('去支付', order);
		uni.navigateTo({
			url: '/pages/entrance-ticket/details/details'
		});
	}

	function useTicket(order) {
		console.log('去使用', order);
		uni.navigateTo({
			url: '/pages/entrance-ticket/details/details'
		});
	}

	function refundTicket(order) {
		console.log('退款', order);
	}

	function reviewTicket(order) {
		console.log('去评价', order);
	}

	function goDetails() {
		uni.navigateTo({
			url: '/pages/entrance-ticket/details/details'
		});
	}

	function selectStatus() {
		select.value = !select.value
		// console.log(this.select);
	}



	function navRight() {
		uni.navigateTo({
			url: '/pages/entrance-ticket/search/search'
		});
	}
</script>

<style scoped>
	.container {
		width: 100%;
		height: 100%;
		/* background-color: #eee; */
	}

	.sou {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
	}

	.title {
		font-size: 30rpx;
		/* font-weight: bold; */
		margin-bottom: 5px;
	}

	.tags {
		display: flex;
		flex-wrap: wrap;
	}

	.tag {
		background-color: #f7f7f7;
		border-radius: 30rpx;
		padding: 10rpx 25rpx;
		margin: 15rpx;
		font-size: 25rpx;
	}

	.input-view-box {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.input-view {
		width: 100%;
		border: #007aff 1rpx solid;
		display: flex;
		align-items: center;
		padding: 15rpx 20rpx;
		border-radius: 50rpx;
	}

	.input-view input {
		font-size: 30rpx;
		margin-left: 10rpx;
		flex: 1;
	}

	:deep(.uni-navbar__header-btns-left) {
		width: 8% !important;
	}

	:deep(.uni-navbar__header-btns-right) {
		width: 0% !important;
	}

	:deep(.uni-navbar-btn-text>.uni-nav-bar-right-text>span) {
		font-size: 25rpx;
		color: #007aff;
	}



	.orders {
		margin-top: 50rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.order-box {
		display: flex;
		justify-content: space-between;
	}

	.order-box image {
		margin-right: 10rpx;
	}

	.order {
		width: 85%;
		display: flex;
		background-color: #fff;
		padding: 35rpx;
		margin-bottom: 30rpx;
		border-radius: 20rpx;
		flex-direction: column;
	}

	.order-date,
	.order-voucher {
		font-size: 30rpx;
		color: #828282;
	}

	.btnBox {
		padding-top: 20rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.order-info,
	.order-status-price {
		display: flex;
		flex-direction: column;
		/* margin-bottom: 20rpx; */
		font-size: 35rpx;
	}

	.order-info {
		font-size: 35rpx;
	}

	.order-title {
		font-weight: bold;
		font-size: 40rpx;
		margin-bottom: 15rpx;
	}

	.order-status {
		color: #ff4d4f;
	}

	.order-price {
		color: #ff0000;
		font-size: 30rpx;
		margin-top: 60rpx;
		text-align: right;
	}

	.order-actions {
		display: flex;
		gap: 10rpx;
	}

	.action-button {
		margin-top: 20rpx;
		padding: 0rpx 20rpx;
		background-color: #fff;
		border: none;
		border-radius: 15rpx;
		/* color: #333; */
	}

	button {
		width: 200rpx;
		font-size: 30rpx;
	}

	.gradient {
		background: linear-gradient(130deg, #007aff, #1acaff);
		color: #fff;
	}

	.statusBox {
		width: 200rpx;
		/* height: 100rpx; */
		display: flex;
		align-items: center;
		justify-content: flex-end;
		color: #ccc;
	}

	.order-titleBox {
		display: flex;
	}

	.select {
		height: 100%;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.mask {
		width: 100%;
		background-color: #fff;
		position: fixed;
		top: 125rpx;
		z-index: 10;
	}

	.maskBtnBox {
		padding: 20rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.maskBtnBox>button {
		width: 45%;
		margin-bottom: 25rpx;
		font-size: 30rpx;
		padding: 10rpx;
	}

	.headerType {
		color: #007aff;
		border: #007aff 1px solid;
		background-color: rgb(211, 255, 255, 0.3);
	}
</style>